<template>
  <div class="bottom-nav">
    <div v-for="(item, index) in data" :key="index" @click="change(item.id)">
      <div :class="['nav-item-img', `item-${index}`, defaultActive === item.id ? 'active' : '']">
      </div>
      <p :class="['font20', defaultActive === item.id ? 'primary' : 'font-666']">{{item.name}}</p>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { BottomNavData } from '../../../modules/index';
@Component
export default class BottomNav extends Vue {
  @Prop() private data?: BottomNavData[];
  @Prop() private defaultActive?: string;
  private selected!: string;
  /**
   * @param id 当前选中的导航栏 id
   */
  private change(id = '') {
    this.$emit('change', id);
  }
  private mounted() {
    console.log(this.data);
    this.selected = this.defaultActive || '';
  }
}
</script>
<style lang="scss" scoped>
.bottom-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 98px;
  box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.15);
  & > div {
    display: inline-block;
    width: 25%;
    height: 98px;
    padding: 12px 0;
  }
}
.nav-item-img {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  background: url('../../../assets/image/footer.png') no-repeat;
  background-size: 400%;
}
.item-0 {
  background-position: 0 0;
}
.item-0.active {
  background-position: 0 -42px;
}
.item-1 {
  background-position: -42px 0;
}
.item-1.active {
  background-position: -42px -42px;
}
.item-2 {
  background-position: -84px 0;
}
.item-2.active {
  background-position: -84px -42px;
}
.item-3 {
  background-position: -126px 0;
}
.item-3.active {
  background-position: -126px -42px;
}
</style>
